/**
 * Created by Ysssssss on 21/1/18.
 */

import React, {useState, useEffect} from 'react';
import { Menu, Popover } from 'antd'
import {RightOutlined} from '@ant-design/icons'
import {withRouter} from "react-router-dom";
import {useSelector} from "react-redux";
import PageSubNav from "@common/PageSubNav";
import BilinIcon from "@common/presentational/BilinIcon";
import { getStage } from "@utils/vars";

const PageNav = props => {
    const { history } = props
    const { userInfoInStore, permissionTag } = useSelector(state => state.user)
    const { bizType, isAdmin, isBrand } = permissionTag
    const [{ hoverNav, activityNav, activitySubNav }, setNavInfo] = useState({
        hoverNav: '',
        activityNav: props.location.pathname.split('/')[1],
        activitySubNav: props.location.pathname.split('/')[2]
    })

    useEffect(() => {
        setNavInfo({
            hoverNav: '',
            activityNav: props.location.pathname.split('/')[1],
            activitySubNav: props.location.pathname.split('/')[2]
        })
    }, [props.location.pathname])

    const handleClick = (nav) => {
        setNavInfo({
            activityNav: nav,
            activitySubNav: '',
            hoverNav: ''
        })
        history.push(`/${nav}`)
    }

    const handleSubClick = path => {
        const [ nav, subNav ] = path.split('/')
        setNavInfo({
            activityNav: nav,
            activitySubNav: subNav,
            hoverNav: ''
        })
        history.push(`/${nav}${subNav ? '/' + subNav : ''}`)
    }

    const handleUserPopoverClick = (e) => {
        history.push(`/${e.key}`)
    }

    const hoverSet = (nav) => {
        activityNav !== nav && setNavInfo(preNavInfo => ({
            ...preNavInfo,
            hoverNav: nav
        }))
    }

    const hoverClear = (nav) => {
        hoverNav === nav && setNavInfo(preNavInfo => ({
            ...preNavInfo,
            hoverNav: ''
        }))
    }

    return (
        <>
            <div className="bilin-web-left">
                <div className="bilin-web-nav-header">
                    <div className="nav-brand-info">
                        <img width={40} height={40} src={userInfoInStore.logo} alt=""/>
                        <p className="ft-16 mgt-12 ft-w600 text-center">{ userInfoInStore.sgName }</p>
                        <p className="ft-12 mgt-8 ft-clr-ml text-center">{ userInfoInStore.desc }</p>
                    </div>
                    <div className="mgt-36 flex-row-between">
                        <div className={`cur-poi text-center ft-hover${activityNav === 'main' ? ' clr-green' : ''}`}
                             onClick={handleClick.bind(this, 'main')}
                        >
                            <BilinIcon type="home" className="ft-28"/>
                            <p className="mgt-8 ft-12 ft-clr-d">主页</p>
                        </div>
                        {/*<div className={`cur-poi text-center ft-hover${activityNav === 'statistics' ? ' clr-green' : ''}`}*/}
                        {/*     onClick={handleClick.bind(this, 'statistics')}*/}
                        {/*>*/}
                        {/*    <BilinIcon type="statistics" className="ft-28"/>*/}
                        {/*    <p className="mgt-8 ft-12 ft-clr-d">统计</p>*/}
                        {/*</div>*/}
                        <div className={`cur-poi text-center ft-hover${activityNav === 'customer' ? ' clr-green' : ''}`}
                             onClick={handleClick.bind(this, 'customer')}
                        >
                            <BilinIcon type="customer" className="ft-28"/>
                            <p className="mgt-8 ft-12 ft-clr-d">客户</p>
                        </div>
                        <div className={`cur-poi text-center ft-hover${activityNav === 'marketing' ? ' clr-green' : ''}`}
                             onClick={handleClick.bind(this, 'marketing')}
                        >
                            <BilinIcon type="market" className="ft-28"/>
                            <p className="mgt-8 ft-12 ft-clr-d">营销</p>
                        </div>
                    </div>
                </div>
                <div className="bilin-web-nav-body">
                    <div className="ft-12 pd-16 bdt-l">业务场景</div>
                    { bizType === null ? (
                        isAdmin && isBrand ? (
                            <div className={`nav-item${activityNav === "shopping-mall" ? ' selected' : ''}`}
                                 onClick={handleSubClick.bind(this, "shopping-mall/open")}
                            >
                                <div className="flex-vertical-center">
                                    <BilinIcon type="mall" className="mgr-12"/>
                                    <span className="ft-14">商城</span>
                                </div>
                            </div>
                        ) : null
                    ) : (
                        <div className={`nav-item flex-row-between${(activityNav === "shopping-mall" || hoverNav === 'shopping-mall') ? ' selected' : ''}`}
                             onMouseEnter={hoverSet.bind(this, 'shopping-mall')}
                             onMouseLeave={hoverClear.bind(this, 'shopping-mall')}
                        >
                            <div className="flex-vertical-center">
                                <BilinIcon type="mall" className="mgr-12"/>
                                <span className="ft-14">商城</span>
                            </div>
                            <RightOutlined className="ft-12 flex-vertical-center"/>
                        </div>
                    ) }
                    <div className={`nav-item${activityNav === "live" ? ' selected' : ''}`}
                         onClick={handleClick.bind(this, 'live')}
                    >
                        <div className="flex-vertical-center">
                            <BilinIcon type="live" className="mgr-12"/>
                            <span className="ft-14">直播</span>
                        </div>
                    </div>
                    <div className={`nav-item${activityNav === "star-group" ? ' selected' : ''}`}
                         onClick={handleClick.bind(this, 'star-group')}
                    >
                        <div className="flex-vertical-center">
                            <BilinIcon type="star" className="mgr-12"/>
                            <span className="ft-14">星团</span>
                        </div>
                    </div>
                    { permissionTag.isBrand ? (
                        <>
                            <div className="ft-12 pd-16 bdt-l">渠道链接</div>
                            <div className={`nav-item${activityNav === "third-party" && activitySubNav === "wechat" ? ' selected' : ''}`}
                                 onClick={handleSubClick.bind(this, "third-party/wechat")}
                            >
                                <div className="flex-vertical-center">
                                    <BilinIcon type="wechat" className="mgr-12"/>
                                    <span className="ft-14">微信</span>
                                </div>
                            </div>
                            <div className={`${getStage() === 'dev' ? '' :'hidden '}nav-item${activityNav === "third-party" && activitySubNav === "wecom" ? ' selected' : ''}`}
                                 onClick={handleSubClick.bind(this, "third-party/wecom")}
                            >
                                <div className="flex-vertical-center">
                                    <BilinIcon type="wecom" className="mgr-12"/>
                                    <span className="ft-14">企业微信{getStage()}</span>
                                </div>
                            </div>
                            <div className={`nav-item${activityNav === "third-party" && activitySubNav === "alipay" ? ' selected' : ''}`}
                                 onClick={handleSubClick.bind(this, 'third-party/alipay')}
                            >
                                <div className="flex-vertical-center">
                                    <BilinIcon type="alipay" className="mgr-12"/>
                                    <span className="ft-14">支付宝</span>
                                </div>
                            </div>
                            <div className={`nav-item${activityNav === "third-party" && activitySubNav === "bytedance" ? ' selected' : ''}`}
                                 onClick={handleSubClick.bind(this, 'third-party/bytedance')}
                            >
                                <div className="flex-vertical-center">
                                    <BilinIcon type="tik-tok" className="mgr-12"/>
                                    <span className="ft-14">抖音</span>
                                </div>
                            </div>
                        </>
                    ) : null }
                </div>
                <div className="bilin-web-nav-footer bdt-l flex">
                    <Popover
                        overlayClassName="nav-user-popover"
                        placement="rightBottom"
                        title={null}
                        content={(
                            <Menu onClick={handleUserPopoverClick} selectedKeys={[]}>
                                <Menu.Item key="brand-list">
                                    <BilinIcon type="brand-home" className="ft-20 mgr-12"/>
                                    <span>品牌主页</span>
                                </Menu.Item>
                                <Menu.Item key="user-setting">
                                    <BilinIcon type="account" className="ft-20 mgr-12"/>
                                    <span>账号设置</span>
                                </Menu.Item>
                                <Menu.Item key="logout">
                                    <BilinIcon type="logout" className="ft-20 mgr-12"/>
                                    <span>退出登录</span>
                                </Menu.Item>
                            </Menu>
                        )}
                        trigger="click"
                    >
                        <div className="nav-user-info bdr-l flex-center cur-poi">
                            <img width={24} height={24} className="bd-rds-half mgr-8" src={userInfoInStore.logo} alt=""/>
                            <span className="nav-user-name text-overflow">{ userInfoInStore.name }</span>
                        </div>
                    </Popover>
                </div>
            </div>
            { bizType === null ? null : (
                <PageSubNav
                    className={`bilin-web-middle ${(activityNav === 'shopping-mall' || hoverNav === 'shopping-mall') ? '' : ' hidden'}`}
                    style={hoverNav === 'shopping-mall' ? {zIndex: 11} : {zIndex: 10}}
                    onMouseEnter={hoverSet.bind(this, 'shopping-mall')}
                    onMouseLeave={hoverClear.bind(this, 'shopping-mall')}
                    onClick={handleSubClick}
                    navInfoList={[
                        {
                            path: 'shopping-mall/product',
                            name: '商城货架',
                        },
                        {
                            path: 'shopping-mall/order',
                            name: '订单管理',
                        },
                        {
                            path: 'shopping-mall/after-sales',
                            name: '售后管理',
                        },
                        {
                            path: 'shopping-mall/design',
                            name: '商城装修',
                        },
                        {
                            path: 'shopping-mall/settings',
                            name: '商城设置',
                        }
                    ]}
                />
            )}
            <PageSubNav
                className={`bilin-web-middle ${activityNav === 'customer' ? '' : ' hidden'}`}
                onClick={handleSubClick}
                navInfoList={[
                    {
                        path: 'customer',
                        name: '会员计划',
                    }, {
                        path: 'customer/list',
                        name: '客户查询',
                    }
                ]}
            />
        </>
    )
}

export default withRouter(PageNav)